<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>微信小程序入门 | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.15972595.css" as="style"><link rel="preload" href="/assets/js/app.6e09c0e4.js" as="script"><link rel="preload" href="/assets/js/2.26fadcea.js" as="script"><link rel="preload" href="/assets/js/52.11309761.js" as="script"><link rel="prefetch" href="/assets/js/10.29078de5.js"><link rel="prefetch" href="/assets/js/100.1775343f.js"><link rel="prefetch" href="/assets/js/101.03c2a233.js"><link rel="prefetch" href="/assets/js/102.2d566277.js"><link rel="prefetch" href="/assets/js/103.28f0aae6.js"><link rel="prefetch" href="/assets/js/104.98d074e6.js"><link rel="prefetch" href="/assets/js/105.a113c54b.js"><link rel="prefetch" href="/assets/js/106.fe975924.js"><link rel="prefetch" href="/assets/js/107.06b48459.js"><link rel="prefetch" href="/assets/js/108.650cfa65.js"><link rel="prefetch" href="/assets/js/109.8dea05a5.js"><link rel="prefetch" href="/assets/js/11.0ffc15c2.js"><link rel="prefetch" href="/assets/js/110.f426e949.js"><link rel="prefetch" href="/assets/js/111.cb0ff462.js"><link rel="prefetch" href="/assets/js/112.2234a7ce.js"><link rel="prefetch" href="/assets/js/113.d42a4afb.js"><link rel="prefetch" href="/assets/js/114.afa6c93d.js"><link rel="prefetch" href="/assets/js/115.e74e58c4.js"><link rel="prefetch" href="/assets/js/116.b52912dc.js"><link rel="prefetch" href="/assets/js/117.f5e176df.js"><link rel="prefetch" href="/assets/js/118.428fdb24.js"><link rel="prefetch" href="/assets/js/119.c7b3c702.js"><link rel="prefetch" href="/assets/js/12.5358dc27.js"><link rel="prefetch" href="/assets/js/120.b28cb8e3.js"><link rel="prefetch" href="/assets/js/121.517216d1.js"><link rel="prefetch" href="/assets/js/122.224b318f.js"><link rel="prefetch" href="/assets/js/123.04e6a56c.js"><link rel="prefetch" href="/assets/js/13.1eb6db46.js"><link rel="prefetch" href="/assets/js/14.2d919975.js"><link rel="prefetch" href="/assets/js/15.351e3a4c.js"><link rel="prefetch" href="/assets/js/16.3acd2d41.js"><link rel="prefetch" href="/assets/js/17.60b03995.js"><link rel="prefetch" href="/assets/js/18.c6ad362d.js"><link rel="prefetch" href="/assets/js/19.8ab677ff.js"><link rel="prefetch" href="/assets/js/20.99f99fea.js"><link rel="prefetch" href="/assets/js/21.c1d6f733.js"><link rel="prefetch" href="/assets/js/22.6f0b0c91.js"><link rel="prefetch" href="/assets/js/23.13368cdd.js"><link rel="prefetch" href="/assets/js/24.c53a9ca6.js"><link rel="prefetch" href="/assets/js/25.cd4407c5.js"><link rel="prefetch" href="/assets/js/26.d9b2ef17.js"><link rel="prefetch" href="/assets/js/27.16352eff.js"><link rel="prefetch" href="/assets/js/28.a62c7d25.js"><link rel="prefetch" href="/assets/js/29.635009f5.js"><link rel="prefetch" href="/assets/js/3.72d46b47.js"><link rel="prefetch" href="/assets/js/30.db885055.js"><link rel="prefetch" href="/assets/js/31.aa8c6cb9.js"><link rel="prefetch" href="/assets/js/32.e63d710c.js"><link rel="prefetch" href="/assets/js/33.4f69bb69.js"><link rel="prefetch" href="/assets/js/34.9d242b1d.js"><link rel="prefetch" href="/assets/js/35.24c7045d.js"><link rel="prefetch" href="/assets/js/36.2988cd72.js"><link rel="prefetch" href="/assets/js/37.05bf63d5.js"><link rel="prefetch" href="/assets/js/38.ecef1ea2.js"><link rel="prefetch" href="/assets/js/39.0fde8ff2.js"><link rel="prefetch" href="/assets/js/4.d95386e0.js"><link rel="prefetch" href="/assets/js/40.99489203.js"><link rel="prefetch" href="/assets/js/41.928918ed.js"><link rel="prefetch" href="/assets/js/42.8ff04c77.js"><link rel="prefetch" href="/assets/js/43.347198e5.js"><link rel="prefetch" href="/assets/js/44.fc4d4540.js"><link rel="prefetch" href="/assets/js/45.5e4eff92.js"><link rel="prefetch" href="/assets/js/46.83a0c228.js"><link rel="prefetch" href="/assets/js/47.37c2f407.js"><link rel="prefetch" href="/assets/js/48.bada4ddc.js"><link rel="prefetch" href="/assets/js/49.562d8b65.js"><link rel="prefetch" href="/assets/js/5.77e36999.js"><link rel="prefetch" href="/assets/js/50.338be56f.js"><link rel="prefetch" href="/assets/js/51.999e3de3.js"><link rel="prefetch" href="/assets/js/53.ea6a0c8a.js"><link rel="prefetch" href="/assets/js/54.a49ee06c.js"><link rel="prefetch" href="/assets/js/55.d4d985f2.js"><link rel="prefetch" href="/assets/js/56.258972e6.js"><link rel="prefetch" href="/assets/js/57.e7d3b5af.js"><link rel="prefetch" href="/assets/js/58.50c14a49.js"><link rel="prefetch" href="/assets/js/59.8edb599b.js"><link rel="prefetch" href="/assets/js/6.ba658368.js"><link rel="prefetch" href="/assets/js/60.d1250584.js"><link rel="prefetch" href="/assets/js/61.28187287.js"><link rel="prefetch" href="/assets/js/62.1cb42759.js"><link rel="prefetch" href="/assets/js/63.3fd80d10.js"><link rel="prefetch" href="/assets/js/64.9f43af49.js"><link rel="prefetch" href="/assets/js/65.c4a47594.js"><link rel="prefetch" href="/assets/js/66.cd22b5d7.js"><link rel="prefetch" href="/assets/js/67.5c9918c9.js"><link rel="prefetch" href="/assets/js/68.fb876377.js"><link rel="prefetch" href="/assets/js/69.3414f481.js"><link rel="prefetch" href="/assets/js/7.83e78719.js"><link rel="prefetch" href="/assets/js/70.f003a000.js"><link rel="prefetch" href="/assets/js/71.39859d24.js"><link rel="prefetch" href="/assets/js/72.12912986.js"><link rel="prefetch" href="/assets/js/73.abd327ea.js"><link rel="prefetch" href="/assets/js/74.36cb7d1d.js"><link rel="prefetch" href="/assets/js/75.1cb96b9a.js"><link rel="prefetch" href="/assets/js/76.6033c6da.js"><link rel="prefetch" href="/assets/js/77.083624e2.js"><link rel="prefetch" href="/assets/js/78.70d3273c.js"><link rel="prefetch" href="/assets/js/79.14f3aecd.js"><link rel="prefetch" href="/assets/js/8.bcb11f96.js"><link rel="prefetch" href="/assets/js/80.95205bda.js"><link rel="prefetch" href="/assets/js/81.a39e63f0.js"><link rel="prefetch" href="/assets/js/82.6298e8dc.js"><link rel="prefetch" href="/assets/js/83.109c5547.js"><link rel="prefetch" href="/assets/js/84.6a1959a1.js"><link rel="prefetch" href="/assets/js/85.6ff6f61a.js"><link rel="prefetch" href="/assets/js/86.7d2bfbe7.js"><link rel="prefetch" href="/assets/js/87.2032d6ae.js"><link rel="prefetch" href="/assets/js/88.5cda9aa6.js"><link rel="prefetch" href="/assets/js/89.60c9e091.js"><link rel="prefetch" href="/assets/js/9.170a94b1.js"><link rel="prefetch" href="/assets/js/90.0dab9f57.js"><link rel="prefetch" href="/assets/js/91.ecf75d5a.js"><link rel="prefetch" href="/assets/js/92.74397fcb.js"><link rel="prefetch" href="/assets/js/93.f5559b26.js"><link rel="prefetch" href="/assets/js/94.27c65783.js"><link rel="prefetch" href="/assets/js/95.ea55ba1f.js"><link rel="prefetch" href="/assets/js/96.8a68510f.js"><link rel="prefetch" href="/assets/js/97.ef520b02.js"><link rel="prefetch" href="/assets/js/98.d4a41570.js"><link rel="prefetch" href="/assets/js/99.bdd726ad.js">
    <link rel="stylesheet" href="/assets/css/0.styles.15972595.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>小程序</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/a18549/" class="sidebar-link">uniapp物联网无网络智能配对模块</a></li><li><a href="/pages/855e3e/" aria-current="page" class="active sidebar-link">微信小程序入门</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/855e3e/#小程序开发者账号注册" class="sidebar-link">小程序开发者账号注册</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#微信开发者工具" class="sidebar-link">微信开发者工具</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#小程序在线demo" class="sidebar-link">小程序在线Demo</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#主体文件结构" class="sidebar-link">主体文件结构</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#页面文件结构" class="sidebar-link">页面文件结构</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#app-json-配置项列表" class="sidebar-link">app.json 配置项列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/855e3e/#window配置" class="sidebar-link">window配置</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#tabbar" class="sidebar-link">tabBar</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#常用布局标签" class="sidebar-link">常用布局标签</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#常用表单标签" class="sidebar-link">常用表单标签</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#轮播图组件" class="sidebar-link">轮播图组件</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#生命周期函数" class="sidebar-link">生命周期函数</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#页面相关事件处理函数" class="sidebar-link">页面相关事件处理函数</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#数据绑定" class="sidebar-link">数据绑定  {{ }}</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/855e3e/#特别注意" class="sidebar-link">特别注意</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#列表渲染-wx-for" class="sidebar-link">列表渲染  wx:for</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/855e3e/#wx-key-提高列表渲染时排序的效率" class="sidebar-link">wx:key   提高列表渲染时排序的效率</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#条件渲染-wx-if-wx-else-wx-elif" class="sidebar-link">条件渲染  wx:if   wx:else   wx:elif</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/855e3e/#wx-if-与-hidden-区别" class="sidebar-link">wx:if 与 hidden 区别</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#事件" class="sidebar-link">事件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/855e3e/#事件绑定和冒泡" class="sidebar-link">事件绑定和冒泡</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#常用事件类型" class="sidebar-link">常用事件类型</a></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#事件传参注意" class="sidebar-link">事件传参注意</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/855e3e/#wxs-脚本" class="sidebar-link">WXS  脚本</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>跨端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Electron</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-0c557b5e><div class="articleInfo" data-v-0c557b5e><ul class="breadcrumbs" data-v-0c557b5e><li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-0c557b5e></a></li> <li data-v-0c557b5e><a href="/web/#大前端" data-v-0c557b5e>大前端</a></li><li data-v-0c557b5e><a href="/web/#小程序" data-v-0c557b5e>小程序</a></li></ul> <div class="info" data-v-0c557b5e><div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-0c557b5e>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;" data-v-0c557b5e>2022-01-13</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">微信小程序入门<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h1 id="微信小程序账号与工具"><a href="#微信小程序账号与工具" class="header-anchor">#</a> 微信小程序账号与工具</h1> <p>在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/</p> <h2 id="小程序开发者账号注册"><a href="#小程序开发者账号注册" class="header-anchor">#</a> 小程序开发者账号注册</h2> <p>微信公众平台：https://mp.weixin.qq.com/</p> <p>小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1</p> <h2 id="微信开发者工具"><a href="#微信开发者工具" class="header-anchor">#</a> 微信开发者工具</h2> <p>微信开发者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html</p> <h2 id="小程序在线demo"><a href="#小程序在线demo" class="header-anchor">#</a> 小程序在线Demo</h2> <h1 id="微信小程序文件结构"><a href="#微信小程序文件结构" class="header-anchor">#</a> 微信小程序文件结构</h1> <h2 id="主体文件结构"><a href="#主体文件结构" class="header-anchor">#</a> 主体文件结构</h2> <p>主体部分由三个文件组成，必须放在项目的根目录，如下：</p> <table><thead><tr><th>文件</th> <th>必填</th> <th>作用</th></tr></thead> <tbody><tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html" target="_blank" rel="noopener noreferrer">app.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>是</td> <td>小程序逻辑</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html" target="_blank" rel="noopener noreferrer">app.json<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>是</td> <td>小程序公共设置</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html" target="_blank" rel="noopener noreferrer">app.wxss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>否</td> <td>小程序公共样式表</td></tr></tbody></table> <h2 id="页面文件结构"><a href="#页面文件结构" class="header-anchor">#</a> 页面文件结构</h2> <p>页面由四个文件组成，分别是：</p> <table><thead><tr><th>文件类型</th> <th>必填</th> <th>作用</th></tr></thead> <tbody><tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html" target="_blank" rel="noopener noreferrer">js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>是</td> <td>页面逻辑 ( 微信小程序没有window和document对象 )</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/" target="_blank" rel="noopener noreferrer">wxml<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>是</td> <td>页面结构  ( XML语法，不是HTML语法 )</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html" target="_blank" rel="noopener noreferrer">wxss<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>否</td> <td>页面样式表 ( <strong>拓展了rpx尺寸单位，微信专属响应式像素</strong> )</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pagejson" target="_blank" rel="noopener noreferrer">json<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>否</td> <td>页面配置  ( 不能写注释，否则编译报错 )</td></tr></tbody></table> <h1 id="微信小程序配置"><a href="#微信小程序配置" class="header-anchor">#</a> 微信小程序配置</h1> <h2 id="app-json-配置项列表"><a href="#app-json-配置项列表" class="header-anchor">#</a> app.json 配置项列表</h2> <blockquote><p><code>app.json</code>文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。</p></blockquote> <table><thead><tr><th>属性</th> <th>类型</th> <th>必填</th> <th>描述</th></tr></thead> <tbody><tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages" target="_blank" rel="noopener noreferrer">pages<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>String Array</td> <td>是</td> <td>设置页面路径</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window" target="_blank" rel="noopener noreferrer">window<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>Object</td> <td>否</td> <td>设置默认页面的窗口表现</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar" target="_blank" rel="noopener noreferrer">tabBar<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>Object</td> <td>否</td> <td>设置底部 tab 的表现</td></tr> <tr><td><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug" target="_blank" rel="noopener noreferrer">debug<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>Boolean</td> <td>否</td> <td>设置是否开启 debug 模式</td></tr></tbody></table> <h3 id="window配置"><a href="#window配置" class="header-anchor">#</a> window配置</h3> <blockquote><p>用于设置小程序的状态栏、导航条、标题、窗口背景色。</p> <p>注意：页面的<code>.json</code>只能设置 <code>window</code> 相关的配置项，以决定本页面的窗口表现，所以无需写 <code>window</code> 这个键。</p></blockquote> <table><thead><tr><th>属性</th> <th>类型</th> <th>默认值</th> <th>描述</th></tr></thead> <tbody><tr><td>navigationBarBackgroundColor</td> <td>HexColor</td> <td>#000000</td> <td>导航栏背景颜色，如&quot;#000000&quot;</td></tr> <tr><td>navigationBarTextStyle</td> <td>String</td> <td>white</td> <td>导航栏标题颜色，仅支持 black/white</td></tr> <tr><td>navigationBarTitleText</td> <td>String</td> <td></td> <td>导航栏标题文字内容</td></tr> <tr><td>backgroundColor</td> <td>HexColor</td> <td>#ffffff</td> <td>窗口的背景色</td></tr> <tr><td>backgroundTextStyle</td> <td>String</td> <td>dark</td> <td>下拉背景字体、loading 图的样式，仅支持 dark/light</td></tr> <tr><td>enablePullDownRefresh</td> <td>Boolean</td> <td>false</td> <td>是否开启下拉刷新，详见<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html#%E9%A1%B5%E9%9D%A2%E7%9B%B8%E5%85%B3%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0" target="_blank" rel="noopener noreferrer">页面相关事件处理函数<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</td></tr> <tr><td>onReachBottomDistance</td> <td>Number</td> <td>50</td> <td>页面上拉触底事件触发时距页面底部距离，单位为px</td></tr></tbody></table> <h3 id="tabbar"><a href="#tabbar" class="header-anchor">#</a> <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar" target="_blank" rel="noopener noreferrer">tabBar<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h3> <p>如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。</p> <p><strong>Tip：</strong></p> <ol><li>当设置 position 为 top 时，将不会显示 icon。</li> <li>tabBar 中的 list 是一个数组，<strong>只能配置最少2个、最多5个 tab</strong>，tab 按数组的顺序排序。</li></ol> <p><strong>属性说明：</strong></p> <table><thead><tr><th>属性</th> <th>类型</th> <th>必填</th> <th>默认值</th> <th>描述</th></tr></thead> <tbody><tr><td>color</td> <td>HexColor</td> <td>是</td> <td></td> <td>tab 上的文字默认颜色</td></tr> <tr><td>selectedColor</td> <td>HexColor</td> <td>是</td> <td></td> <td>tab 上的文字选中时的颜色</td></tr> <tr><td>backgroundColor</td> <td>HexColor</td> <td>是</td> <td></td> <td>tab 的背景色</td></tr> <tr><td>borderStyle</td> <td>String</td> <td>否</td> <td>black</td> <td>tabbar上边框的颜色， 仅支持 black/white</td></tr> <tr><td>list</td> <td>Array</td> <td>是</td> <td></td> <td>tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td></tr> <tr><td>position</td> <td>String</td> <td>否</td> <td>bottom</td> <td>可选值 bottom、top，设置成top是无图标</td></tr></tbody></table> <p>其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：</p> <table><thead><tr><th>属性</th> <th>类型</th> <th>必填</th> <th>说明</th></tr></thead> <tbody><tr><td>pagePath</td> <td>String</td> <td>是</td> <td>页面路径，必须在 pages 中先定义</td></tr> <tr><td>text</td> <td>String</td> <td>是</td> <td>tab 上按钮文字</td></tr> <tr><td>iconPath</td> <td>String</td> <td>否</td> <td>图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效</td></tr> <tr><td>selectedIconPath</td> <td>String</td> <td>否</td> <td>选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效</td></tr></tbody></table> <p>图示：</p> <h1 id="微信小程序组件-标签"><a href="#微信小程序组件-标签" class="header-anchor">#</a> 微信小程序组件(标签)</h1> <p>组件文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/</p> <h2 id="常用布局标签"><a href="#常用布局标签" class="header-anchor">#</a> 常用布局标签</h2> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>				相当于    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>				相当于    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>				相当于    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>		相当于    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>				区块标签，不会渲染到页面
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>注意：image组件默认宽度300px、高度225px，很多时候我们都不需要这个默认宽高，记得手动设置宽高</strong></p> <h2 id="常用表单标签"><a href="#常用表单标签" class="header-anchor">#</a> 常用表单标签</h2> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>				
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>radio</span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="轮播图组件"><a href="#轮播图组件" class="header-anchor">#</a> 轮播图组件</h2> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper</span> <span class="token attr-name">indicator-dots</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>是否显示面板指示点<span class="token punctuation">&quot;</span></span> <span class="token attr-name">autoplay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>是否自动切换<span class="token punctuation">&quot;</span></span> <span class="token attr-name">interval</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>自动切换时间间隔<span class="token punctuation">&quot;</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>滑动动画时长<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
      	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>图片路径1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>375<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
      	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>图片路径2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>375<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>探索：实现无缝轮播怎么办？</p> <h1 id="微信小程序页面函数"><a href="#微信小程序页面函数" class="header-anchor">#</a> 微信小程序页面函数</h1> <h2 id="生命周期函数"><a href="#生命周期函数" class="header-anchor">#</a> 生命周期函数</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/** 页面的初始数据 */</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 生命周期函数--监听页面加载 */</span>
  <span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 生命周期函数--监听页面初次渲染完成 */</span>
  <span class="token function-variable function">onReady</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 生命周期函数--监听页面显示 */</span>
  <span class="token function-variable function">onShow</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 生命周期函数--监听页面隐藏 */</span>
  <span class="token function-variable function">onHide</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 生命周期函数--监听页面卸载 */</span>
  <span class="token function-variable function">onUnload</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="页面相关事件处理函数"><a href="#页面相关事件处理函数" class="header-anchor">#</a> 页面相关事件处理函数</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token comment">/** 页面相关事件处理函数--监听用户下拉动作 */</span>
  <span class="token function-variable function">onPullDownRefresh</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 页面上拉触底事件的处理函数 */</span>
  <span class="token function-variable function">onReachBottom</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/** 用户点击右上角分享 */</span>
  <span class="token function-variable function">onShareAppMessage</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h1 id="wxml-布局"><a href="#wxml-布局" class="header-anchor">#</a> WXML  布局</h1> <h2 id="数据绑定"><a href="#数据绑定" class="header-anchor">#</a> <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html" target="_blank" rel="noopener noreferrer">数据绑定<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>  </h2> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token comment">&lt;!--wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span> {{message}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// page.js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
    message<span class="token operator">:</span> <span class="token string">'Hello MINA!'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="特别注意"><a href="#特别注意" class="header-anchor">#</a> 特别注意</h3> <ol><li><strong>花括号和引号之间不能有空格</strong></li> <li><strong>不要直接写 checked=&quot;false&quot;，其计算结果是一个字符串，转成 boolean 类型后代表真值。</strong></li></ol> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>checkbox</span><span class="token punctuation">&gt;</span></span>					其计算结果是一个字符串，转成 boolean 类型后变成了 true
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{false}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>checkbox</span><span class="token punctuation">&gt;</span></span>				正确写法
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="列表渲染-wx-for"><a href="#列表渲染-wx-for" class="header-anchor">#</a> <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html" target="_blank" rel="noopener noreferrer">列表渲染<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>  wx:for</h2> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token comment">&lt;!--wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{array}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> {{item}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// page.js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
    array<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="wx-key-提高列表渲染时排序的效率"><a href="#wx-key-提高列表渲染时排序的效率" class="header-anchor">#</a> wx:key   提高列表渲染时排序的效率</h3> <p><code>wx:key</code> 的值以两种形式提供</p> <ol><li>字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li> <li>保留关键字 <code>*this</code> 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。</li></ol> <h2 id="条件渲染-wx-if-wx-else-wx-elif"><a href="#条件渲染-wx-if-wx-else-wx-elif" class="header-anchor">#</a> <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html" target="_blank" rel="noopener noreferrer">条件渲染<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>  wx:if   wx:else   wx:elif</h2> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token comment">&lt;!--wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{length &gt;= 80}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 优秀 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{length &gt;= 60}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 良好 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token punctuation">&gt;</span></span> 加油 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// page.js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
    length<span class="token operator">:</span> <span class="token string">'95'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="wx-if-与-hidden-区别"><a href="#wx-if-与-hidden-区别" class="header-anchor">#</a> <code>wx:if</code> 与 <code>hidden</code> 区别</h3> <p><code>wx:if</code>  是否渲染， <code>hidden</code>  是否隐藏。</p> <p>一般来说，<code>wx:if</code> 有更高的切换消耗而 <code>hidden</code> 有更高的初始渲染消耗。</p> <p>因此，如果需要频繁切换的情景下，用 <code>hidden</code> 更好。</p> <h2 id="事件"><a href="#事件" class="header-anchor">#</a> <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html" target="_blank" rel="noopener noreferrer">事件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h2> <ul><li>事件对象可以获取额外信息，如 id, dataset(自定义属性集合), touches(触摸点坐标)。</li></ul> <h3 id="事件绑定和冒泡"><a href="#事件绑定和冒泡" class="header-anchor">#</a> 事件绑定和冒泡</h3> <ol><li>冒泡事件    bind事件类型        如	 <code>bindtap</code> <code>bindlongpress</code></li> <li>非冒泡事件    catch事件类型    如  <code>catchtap</code> <code>catchlongpress</code></li></ol> <h3 id="常用事件类型"><a href="#常用事件类型" class="header-anchor">#</a> 常用事件类型</h3> <table><thead><tr><th>类型</th> <th>触发条件</th></tr></thead> <tbody><tr><td>tap</td> <td>手指触摸后马上离开</td></tr> <tr><td>longpress</td> <td>手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td></tr></tbody></table> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token comment">&lt;!--wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">data-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>自定义属性<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapHandle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 点我触发事件 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// page.js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">tapHandle</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="事件传参注意"><a href="#事件传参注意" class="header-anchor">#</a> 事件传参注意</h3> <p>小程序绑定事件只能写函数名称，不能通过括号方式传参。</p> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token comment">&lt;!--wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapHandle(520)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 点我触发事件 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>								错误，事件不能触发
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">data-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>520<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tapHandle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 点我触发事件 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>	
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// page.js</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">tapHandle</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>index <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 输出标签自定义属性上的index值</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="wxs-脚本"><a href="#wxs-脚本" class="header-anchor">#</a> WXS  脚本</h2> <p>WXS（WeiXin Script）是小程序的一套脚本语言，功能类似<code>&lt;script&gt;</code>标签，用于在视图层定义函数(比较少用)。</p> <div class="language-xml line-numbers-mode"><pre class="language-xml"><code><span class="token comment">&lt;!--wxml--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>wxs</span> <span class="token attr-name">module</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>foo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
var sum = function(a,b){
  return a+b;
};
// 这里可以导出一个对象，这个对象可以直接在界面上使用 
module.exports.sum = sum;
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>wxs</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span> {{foo.sum}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h1 id="wxss-样式"><a href="#wxss-样式" class="header-anchor">#</a> WXSS 样式</h1> <p>WXSS(WeiXin Style Sheets)是一套样式语言。</p> <p>与 CSS 相比，WXSS 扩展以下2个特性：</p> <ul><li>尺寸单位      rpx ( responsive pixel 响应式像素)</li> <li>样式导入      @import  &quot;样式表路径&quot;;</li></ul> <h1 id="常用快捷键"><a href="#常用快捷键" class="header-anchor">#</a> 常用快捷键</h1> <table><thead><tr><th>快捷键</th> <th>说明</th></tr></thead> <tbody><tr><td>shift + alt + F</td> <td>格式化代码</td></tr> <tr><td>ctrl + P</td> <td>跳到文件</td></tr> <tr><td>ctrl + E</td> <td>跳到最近文件</td></tr></tbody></table></div></div> <!----> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/01/21, 15:51:34</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/a18549/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">uniapp物联网无网络智能配对模块</div></a> <a href="/pages/bca428/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">uniapp最快入门</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/a18549/" class="prev">uniapp物联网无网络智能配对模块</a></span> <span class="next"><a href="/pages/bca428/">uniapp最快入门</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/486e07/"><div>
            Git Hooks
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/f041f4/"><div>
            标准化编程规范解决方案
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/2b68bd/"><div>
            git 提交信息规范
            <!----></div></a> <span class="date">02-24</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2022
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.6e09c0e4.js" defer></script><script src="/assets/js/2.26fadcea.js" defer></script><script src="/assets/js/52.11309761.js" defer></script>
  </body>
</html>
